<section class="vbox">
    <section class="w-f-md" id="bjax-target">
        <section class="hbox stretch">
            <!-- side content -->
            <aside class="aside bg-light dk" id="sidebar">
                <section class="vbox animated fadeInUp">
                    <section class="scrollable hover">
                        <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                            <a href="" class="list-group-item" ng-click="changeTypeFun({id: '', name: ''})" ng-class="{true: 'active'}[currentType == '']">
                                所有
                            </a>
                            <a href="" ng-repeat="type in typeList" ng-click="changeTypeFun(type)" class="list-group-item" ng-class="{true: 'active'}[currentType == type.name]">
                                {{type.name}}
                            </a>
                        </div>
                    </section>
                </section>
            </aside>
            <!-- / side content -->
            <section>
                <section class="vbox">
                    <section class="scrollable padder-lg">
                        <h2 class="font-thin m-b" ng-if="currentType != ''">{{currentType}}</h2>
                        <h2 class="font-thin m-b" ng-if="currentType == ''">所有</h2>
                        <div class="row row-sm">
                            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-repeat="song in songList">
                                <div class="item">
                                    <div class="pos-rlt">
                                        <div class="item-overlay opacity r r-2x bg-black">
                                            <div class="center text-center m-t-n">
                                                <a href="" ng-click="playCurrentSong(song)"><i class="fa fa-play-circle i-2x"></i></a>
                                            </div>
                                        </div>
                                        <a href="">
                                            <img src="{{song.pic_big}}" alt="" class="r r-2x img-full">
                                        </a>
                                    </div>
                                    <div class="padder-v">
                                        <a href="" data-bjax data-target="#bjax-target"
                                           data-el="#bjax-el" data-replace="true" class="text-ellipsis">
                                            {{song.title}}
                                        </a>
                                        <a href="" data-bjax data-target="#bjax-target"
                                           data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">
                                            {{song.author}}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="pagination pagination">
                            <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>